<template>
  <div class="demo-app">
    <el-alert style="margin-top: 20px;" center title="请先选择项目(不选择月份默认导出该项目所有工作量)" type="success"></el-alert>
    <el-row style="margin-top: 20px;">
      <el-select
        v-model="projectId"
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading2"
      >
        <el-option
          v-for="item in selectOptions"
          :key="item.projectId"
          :label="'['+item.projectCode+']'+item.projectName"
          :value="item.projectId"
        ></el-option>
      </el-select>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="8" :offset="2">
        <el-date-picker
          v-model="mouth"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          format="yyyy年MM月"
          value-format="yyyy-MM"
        ></el-date-picker>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="8" :offset="10">
        <el-link
          icon="el-icon-download"
          :disabled="projectId==''"
          target="_blank"
          :href="exportData()"
        >下载</el-link>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import request from "@/utils/request";
import _ from "lodash";
export default {
  components: {},
  created() {
    this.remoteMethod();
  },
  data: function () {
    return {
      loading2: false,
      //选择的月份
      mouth: [],
      loading: false,
      //表格数据
      tableData: [{}],
      selectOptions: [{}],
      projectId: "",
    };
  },
  methods: {
    remoteMethod(query) {
      this.loading = true;
      request({
        url: "/eip/myProject/getMyProjects",
        method: "get",
        params: { term: query },
      })
        .then((r) => {
          this.selectOptions = r.data;
          this.loading = false;
        })
        .catch((e) => {
          this.msgError(e || "数据请求失败");
        });
    },
    closeView() {
      this.$root.closeModal("/eip/project/exportWorkloadDetail");
    },
    exportData() {
      var projectId = this.projectId;
      if (this.mouth == null || this.mouth.length == 0) {
        return `${process.env.VUE_APP_BASE_API}/eip/excel/exportWorkloads?projectId=${projectId}`;
      } else {
        var time = _.join(this.mouth, ",");
        return `${process.env.VUE_APP_BASE_API}/eip/excel/exportWorkloads?projectId=${projectId}&time=${time}`;
      }
    },
  },
};
</script>

<style lang='css' scoped>
</style>
